Introduction

In this exercise, you will go through the steps of taking a wireframe and turning it into a high-fidelity mock-up. On completion, you will have all the skills to take the wireframes of your design solution for your Little Lemon project and produce high-fidelity mock-ups for Adrian. The images can be found inside the linked .zip file below:

The exercise will also cover applying design fundamentals using the brand style guide, which specifies every aspect of the look and feel of the brand. This includes typefaces, colors and how pictures and images should be used. It also includes a UI kit, which is a set of files that contains critical UI components like font sizes, icons, and documentation.

You may wish to revise the following lesson items from the Principles of UX and UI course before you begin or refer to them as you go along:

• Design text hierarchy and grid

• Working with images

• Stylize high fidelity design

Scenario

The owners of the little Lemon Restaurant, Adrian and Marion, have approved the wireframes for their app and want you to turn these wireframes into a high-fidelity design, or a design that closely resembles the final product using their brand style guide.

Instructions

Step 1: Brand Style guide

Download and review the Little Lemon style guide that is linked below:

Step 2: Import .fig file

Download the .fig file that is linked below and import it into Figma. It contains a wireframe (demonstrated in the image below) which you will use as the base for this exercise:

If you are unsure of how to import this file, please refer to the reading How to save and import Figma files from Module 3, Lesson 1 of the course Principles of UX and UI Design .

Step 3: Create color styles

Let's start with creating the styles as per the brand style guide. Styles help you simplify your workflow, keep text and colors consistent, and save valuable time.

To create a color style, follow the steps below using the Little Lemon brand colors:

• Create a new shape in your Figma file and go to Fill. Fill the layer with #495E57 .

• Click on the four dots icon to trigger the Color Styles modal.

• Click on the + icon in the right-hand corner of the Color Styles modal.

• Give your style a preferred name, in this case Primary 1 , and click the Create Style button. Repeat this process for the other colors in the style guide.

Step 4: Create text styles

To create text styles, follow the steps below using the Little Lemon brand text styles:

• Start by creating a new text layer and configure the settings. For example:

  • Font family: Markazi Text

  • Font size: 64

  • Font weight: Medium

• Click on the four dots icon in the Text section to trigger the text modal.

• Click on the + icon in the right corner of the Text Styles modal.

• Give your style the name Display and click on the Create Style button. Repeat this process for the other text in the style guide adding a navbar style: Karla 20, bold, sentence case.

Step 5: Add content to the placeholders on the wireframe

Add the contents of the top bar, which are the logo and profile icon.

• Select the logo rectangle and change the fill from solid to image.

• Select the logo image from your assets folder and set it to fit. Do the same for the user profile.

Step 6: Configure the hero section

The contents of this section are the background, heading, subheading, description content, restaurant image and search bar.

• Select the background rectangle and change the fill to primary 1 in the color style.

• Change the Heading Little Lemon text to Display and its color to primary 2 , apply Chicago style to the subheading and set the color to white.

• Add the following paragraph: “We are a family-owned Mediterranean restaurant, focused on traditional recipes served with a modern twist.” Change the font to Lead text .

• Insert the restaurant image from your assets folder and set it to fill. Give it rounded corners by setting the radius to 16.

Step 7: Set up the menu categories

Create an auto layout button and duplicate it three times and add the text Starters, Mains, Desserts and Sides to the buttons.

Step 8: Set up the menu items section

Here you need to create a food menu title, a description of the meal, a price and a photograph.

Tip: Create a component for this for reuse for the other menu items.

Conclusion

Well done! You have applied some design fundamentals, added content, styled your wireframe and now you have a high-fidelity mock-up of the home screen.